<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  table {}

  tr,
  th,
  td {
    text-align: center;
    border: 1px solid #333;
  }

  .♠,
  .♣ {
    color: #333;

  }

  .♥,
  .♦ {
    color: #f33;
  }
</style>

<body>
  <table id="table">

  </table>
  <div id="sgs">

  </div>
</body>
<script>
  let show = [];
  let sgs = [
    { dp: 'S2', name: '寒冰剑', package: 'EX' },
    { dp: 'HQ', name: '闪电', package: 'EX' },
    { dp: 'C2', name: '仁王盾', package: 'EX' },
    { dp: 'D5', name: '木牛流马', package: 'EX' },
    { dp: 'DQ', name: '无懈可击', package: 'EX' },
    { dp: 'SA', name: '闪电', package: 'A' }, { dp: 'SA', name: '决斗', package: 'B' }, { dp: 'SA', name: '古锭刀', package: 'C' },
    { dp: 'S2', name: '八卦', package: 'A' }, { dp: 'S2', name: '双股剑', package: 'B' }, { dp: 'S2', name: '藤甲', package: 'C' },
    { dp: 'S3', name: '过河拆桥', package: 'A' }, { dp: 'S3', name: '顺手牵羊', package: 'B' }, { dp: 'S3', name: '酒', package: 'C' },
    { dp: 'S4', name: '过河拆桥', package: 'A' }, { dp: 'S4', name: '顺手牵羊', package: 'B' }, { dp: 'S4', name: '雷杀', package: 'C' },
    { dp: 'S5', name: '青龙刀', package: 'A' }, { dp: 'S5', name: '绝影', package: 'B' }, { dp: 'S5', name: '雷杀', package: 'C' },
    { dp: 'S6', name: '乐不思蜀', package: 'A' }, { dp: 'S6', name: '青釭剑', package: 'B' }, { dp: 'S6', name: '雷杀', package: 'C' },
    { dp: 'S7', name: '南蛮入侵', package: 'A' }, { dp: 'S7', name: '杀', package: 'B' }, { dp: 'S7', name: '雷杀', package: 'C' },
    { dp: 'S8', name: '杀', package: 'A' }, { dp: 'S8', name: '杀', package: 'B' }, { dp: 'S8', name: '雷杀', package: 'C' },
    { dp: 'S9', name: '杀', package: 'A' }, { dp: 'S9', name: '杀', package: 'B' }, { dp: 'S9', name: '酒', package: 'C' },
    { dp: 'S0', name: '杀', package: 'A' }, { dp: 'S0', name: '杀', package: 'B' }, { dp: 'S0', name: '兵粮寸断', package: 'C' },
    { dp: 'SJ', name: '无懈可击', package: 'A' }, { dp: 'SJ', name: '顺手牵羊', package: 'B' }, { dp: 'SJ', name: '铁索连环', package: 'C' },
    { dp: 'SQ', name: '丈八矛', package: 'A' }, { dp: 'SQ', name: '过河拆桥', package: 'B' }, { dp: 'SQ', name: '铁索连环', package: 'C' },
    { dp: 'SK', name: '大宛', package: 'A' }, { dp: 'SK', name: '南蛮入侵', package: 'B' }, { dp: 'SK', name: '无懈可击', package: 'C' },
    { dp: 'HA', name: '桃园结义', package: 'A' }, { dp: 'HA', name: '万箭齐发', package: 'B' }, { dp: 'HA', name: '无懈可击', package: 'C' },
    { dp: 'H2', name: '闪', package: 'A' }, { dp: 'H2', name: '闪', package: 'B' }, { dp: 'H2', name: '火攻', package: 'C' },
    { dp: 'H3', name: '桃', package: 'A' }, { dp: 'H3', name: '五谷丰登', package: 'B' }, { dp: 'H3', name: '火攻', package: 'C' },
    { dp: 'H4', name: '桃', package: 'A' }, { dp: 'H4', name: '五谷丰登', package: 'B' }, { dp: 'H4', name: '火杀', package: 'C' },
    { dp: 'H5', name: '麒麟弓', package: 'A' }, { dp: 'H5', name: '赤兔', package: 'B' }, { dp: 'H5', name: '桃', package: 'C' },
    { dp: 'H6', name: '桃', package: 'A' }, { dp: 'H6', name: '乐不思蜀', package: 'B' }, { dp: 'H6', name: '桃', package: 'C' },
    { dp: 'H7', name: '桃', package: 'A' }, { dp: 'H7', name: '无中生有', package: 'B' }, { dp: 'H7', name: '火杀', package: 'C' },
    { dp: 'H8', name: '桃', package: 'A' }, { dp: 'H8', name: '无中生有', package: 'B' }, { dp: 'H8', name: '闪', package: 'C' },
    { dp: 'H9', name: '桃', package: 'A' }, { dp: 'H9', name: '无中生有', package: 'B' }, { dp: 'H9', name: '闪', package: 'C' },
    { dp: 'H0', name: '杀', package: 'A' }, { dp: 'H0', name: '杀', package: 'B' }, { dp: 'H0', name: '火杀', package: 'C' },
    { dp: 'HJ', name: '杀', package: 'A' }, { dp: 'HJ', name: '无中生有', package: 'B' }, { dp: 'HJ', name: '闪', package: 'C' },
    { dp: 'HQ', name: '桃', package: 'A' }, { dp: 'HQ', name: '过河拆桥', package: 'B' }, { dp: 'HQ', name: '闪', package: 'C' },
    { dp: 'HK', name: '爪黄飞电', package: 'A' }, { dp: 'HK', name: '闪', package: 'B' }, { dp: 'HK', name: '无懈可击', package: 'C' },
    { dp: 'DA', name: '连弩', package: 'A' }, { dp: 'DA', name: '决斗', package: 'B' }, { dp: 'DA', name: '朱雀羽扇', package: 'C' },
    { dp: 'D2', name: '闪', package: 'A' }, { dp: 'D2', name: '闪', package: 'B' }, { dp: 'D2', name: '桃', package: 'C' },
    { dp: 'D3', name: '闪', package: 'A' }, { dp: 'D3', name: '顺手牵羊', package: 'B' }, { dp: 'D3', name: '桃', package: 'C' },
    { dp: 'D4', name: '闪', package: 'A' }, { dp: 'D4', name: '顺手牵羊', package: 'B' }, { dp: 'D4', name: '火杀', package: 'C' },
    { dp: 'D5', name: '闪', package: 'A' }, { dp: 'D5', name: '贯石斧', package: 'B' }, { dp: 'D5', name: '火杀', package: 'C' },
    { dp: 'D6', name: '闪', package: 'A' }, { dp: 'D6', name: '杀', package: 'B' }, { dp: 'D6', name: '闪', package: 'C' },
    { dp: 'D7', name: '闪', package: 'A' }, { dp: 'D7', name: '杀', package: 'B' }, { dp: 'D7', name: '闪', package: 'C' },
    { dp: 'D8', name: '闪', package: 'A' }, { dp: 'D8', name: '杀', package: 'B' }, { dp: 'D8', name: '闪', package: 'C' },
    { dp: 'D9', name: '闪', package: 'A' }, { dp: 'D9', name: '杀', package: 'B' }, { dp: 'D9', name: '酒', package: 'C' },
    { dp: 'D0', name: '闪', package: 'A' }, { dp: 'D0', name: '杀', package: 'B' }, { dp: 'D0', name: '闪', package: 'C' },
    { dp: 'DJ', name: '闪', package: 'A' }, { dp: 'DJ', name: '闪', package: 'B' }, { dp: 'DJ', name: '闪', package: 'C' },
    { dp: 'DQ', name: '桃', package: 'A' }, { dp: 'DQ', name: '方天画戟', package: 'B' }, { dp: 'DQ', name: '火攻', package: 'C' },
    { dp: 'DK', name: '桃', package: 'A' }, { dp: 'DK', name: '紫骍', package: 'B' }, { dp: 'DK', name: '骅骝', package: 'C' },
    { dp: 'CA', name: '连弩', package: 'A' }, { dp: 'CA', name: '决斗', package: 'B' }, { dp: 'CA', name: '白银狮子', package: 'C' },
    { dp: 'C2', name: '八卦', package: 'A' }, { dp: 'C2', name: '杀', package: 'B' }, { dp: 'C2', name: '藤甲', package: 'C' },
    { dp: 'C3', name: '过河拆桥', package: 'A' }, { dp: 'C3', name: '杀', package: 'B' }, { dp: 'C3', name: '酒', package: 'C' },
    { dp: 'C4', name: '过河拆桥', package: 'A' }, { dp: 'C4', name: '杀', package: 'B' }, { dp: 'C4', name: '兵粮寸断', package: 'C' },
    { dp: 'C5', name: '的卢', package: 'A' }, { dp: 'C5', name: '杀', package: 'B' }, { dp: 'C5', name: '雷杀', package: 'C' },
    { dp: 'C6', name: '乐不思蜀', package: 'A' }, { dp: 'C6', name: '杀', package: 'B' }, { dp: 'C6', name: '雷杀', package: 'C' },
    { dp: 'C7', name: '南蛮入侵', package: 'A' }, { dp: 'C7', name: '杀', package: 'B' }, { dp: 'C7', name: '雷杀', package: 'C' },
    { dp: 'C8', name: '杀', package: 'A' }, { dp: 'C8', name: '杀', package: 'B' }, { dp: 'C8', name: '雷杀', package: 'C' },
    { dp: 'C9', name: '杀', package: 'A' }, { dp: 'C9', name: '杀', package: 'B' }, { dp: 'C9', name: '酒', package: 'C' },
    { dp: 'C0', name: '杀', package: 'A' }, { dp: 'C0', name: '杀', package: 'B' }, { dp: 'C0', name: '铁索连环', package: 'C' },
    { dp: 'CJ', name: '杀', package: 'A' }, { dp: 'CJ', name: '杀', package: 'B' }, { dp: 'CJ', name: '铁索连环', package: 'C' },
    { dp: 'CQ', name: '借刀杀人', package: 'A' }, { dp: 'CQ', name: '无懈可击', package: 'B' }, { dp: 'CQ', name: '铁索连环', package: 'C' },
    { dp: 'CK', name: '借刀杀人', package: 'A' }, { dp: 'CK', name: '无懈可击', package: 'B' }, { dp: 'CK', name: '铁索连环', package: 'C' },
  ].map((v) => {
    let dp = v.dp.split('')
    let decor = ((k) => {
      return { 'S': '♠', 'H': '♥', 'D': '♦', 'C': '♣' }[k]
    })(dp[0])
    let point = ((k) => {
      return { 'A': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9, '0': 10, 'J': 11, 'Q': 12, 'K': 13, }[k]
    })(dp[1])
    let type = ((str) => {
      if (str.match(/麒麟弓|方天画戟|朱雀羽扇|青龙刀|丈八矛|贯石斧|青釭剑|双股剑|寒冰剑|古锭刀|连弩/)) {
        return { type: '装备', attr: '武器' }
      }
      if (str.match(/八卦|仁王盾|藤甲|白银狮子/)) {
        return { type: '装备', attr: '防具' }
      }
      if (str.match(/的卢|爪黄飞电|绝影|骅骝/)) {
        return { type: '装备', attr: '防御马' }
      }
      if (str.match(/赤兔|大宛|紫骍/)) {
        return { type: '装备', attr: '进攻马' }
      }
      if (str.match(/过河拆桥|顺手牵羊|借刀杀人|南蛮入侵|万箭齐发|五谷丰登|桃园结义|无中生有|无懈可击|铁索连环|火攻/)) {
        return { type: '锦囊', isDelayed: false }
      }
      if (str.match(/乐不思蜀|闪电|兵粮寸断/)) {
        return { type: '锦囊', isDelayed: true }
      }
      return { type: '基本' }

    })(v.name)
    return Object.assign({
      decor, point,
    }, type, v)
  })
  console.log(sgs)
  let nsgs = sgs.reduce((t, v, i, a) => {
    if (v.package == 'A') { t.a.push(v) }
    if (v.package == 'B') { t.b.push(v) }
    if (v.package == 'EX') { t.ex.push(v) }
    if (v.package == 'C') { t.j.push(v) }
    return t
  }, { a: [], b: [], ex: [], j: [] })
  let html_0 = new Array(13).fill(1).reduce((t, v, i, a) => {
    if (i % 13 == 0) { t += '<tr><th></th>' };
    let k = { 0: 'A', 10: 'J', 11: 'Q', 12: 'K' }[i] || i + 1;
    t += `<td>${k}</td>`;
    if (i % 13 == 12) { t += '</tr>' };
    return t;
  }, '')
  let html_1 = nsgs.a.reduce((t, v, i, a) => {
    if (i % 13 == 0) { t += `<tr><th class="${v.decor}">${v.decor}</th>` };
    t += `<td class="${v.decor}">${v.name}</td>`;
    if (i % 13 == 12) { t += '</tr>' };
    return t;
  }, '');
  let html_2 = nsgs.b.reduce((t, v, i, a) => {
    if (i % 13 == 0) { t += `<tr><th class="${v.decor}">${v.decor}</th>` };
    t += `<td class="${v.decor}">${v.name}</td>`;
    if (i % 13 == 12) { t += '</tr>' };
    return t;
  }, '');
  let html_3 = nsgs.j.reduce((t, v, i, a) => {
    if (i % 13 == 0) { t += `<tr><th class="${v.decor}">${v.decor}</th>` };
    t += `<td class="${v.decor}">${v.name}</td>`;
    if (i % 13 == 12) { t += '</tr>' };
    return t;
  }, '');
  document.getElementById('table').innerHTML = [html_0, html_1, html_2, html_3].join()

</script>

</html>